<template>
  <div>
    <m-card :title="title" :icon='icon' :categories='[]'>
      <div class="card-body">
        <div class="nav jc-between">
          <div class="nav-item" @click='$refs.myswiper.swiper.slideTo(i)' :class='{active: index === i}' v-for="(category,i) in categories"
            :key='i'>
            <div>{{category.name}}</div>
          </div>
        </div>
        <div class="nav-body">
          <div class="swiper">
            <template>
              <div>
                <swiper ref="myswiper" :options="{autoHeight: true}"
                @slide-change ="()=>{index = $refs.myswiper.swiper.realIndex}">
                  <swiper-slide v-for="(category, i) in categories" :key='i'>
                    <slot name='items' :category='category'></slot>
                  </swiper-slide>
                </swiper>
              </div>
            </template>
          </div>
        </div>
      </div>
    </m-card>
  </div>
</template>

<script>

export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories: { type: Array, required: true },
  },
  data() {
    return {
      index: 0,
    };
  },
};
</script>